import React from 'react';

const FancyButton = React.forwardRef(function FancyButtonForwardRef(props, ref) {
    return (
      <button ref={ref} className="FancyButton">
        {props.children}
      </button>
    );
  }
)

// 高阶组件
function logProps(WrappedComponent) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;
      // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
      return <WrappedComponent ref={forwardedRef} {...rest} />;
    }
  }

  // 注意 React.forwardRef 回调的第二个参数 “ref”。
  // 我们可以将其作为常规 prop 属性传递给 LogProps，例如 “logPropsForwardRef”
  // 然后它就可以被挂载到被 LogProps 包裹的子组件上。
  function logPropsForwardRef(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;
  }

  // 在 DevTools 中为该组件提供一个更有用的显示名。
  // 例如 “ForwardRef(logProps(MyComponent))”
  // const name = WrappedComponent.displayName || WrappedComponent.name;
  // forwardRef.displayName = `logProps(${name})`;

  return React.forwardRef(logPropsForwardRef);
}

// 注意： 不要在 render 方法中使用 HOC
const WrappedFancyButton = logProps(FancyButton);

export default class TransferRefs extends React.Component {

  handleBtnClick(ref) {
    console.log(ref);
  }

  render() {
    // 你可以直接获取 DOM button 的 ref：
    const ref = React.createRef();
    return (
      <div>
        <button onClick={ () => { this.handleBtnClick(ref); } }>Click me!</button>
        <WrappedFancyButton ref={ref}>WrappedFancyButton!</WrappedFancyButton>
      </div>
    );
  }
}